<template>
  <div id="cart">
    <!-- 顶部 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{ cartLength }})</div>
    </nav-bar>

    <!-- 购物车列表 -->
    <cart-list />

    <!-- 底部汇总栏 -->
    <cart-bottom-bar />
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue'
import CartList from './childComps/CartList.vue'
import CartBottomBar from './childComps/CartBottomBar'

// mapGetters可以帮助你将vuex中的getters中定义的函数解析出来，
import { mapGetters } from 'vuex'

export default {
  name: 'Cart',
  components: {
    NavBar,
    CartList,
    CartBottomBar
  },
  computed: {
    // mapGetters的两种写法：数组写法和对象写法
    // 1、数组写法：数组中放的是getters中要解析的函数，cartLength就可以直接放到模板中了
    ...mapGetters(['cartLength'])  
    // 2、对象写法：可以将getters中的属性解析出来，然后重命名使用
    // ...mapGetters({
    //   length: 'cartLength'
    // })
  }

}
</script>

<style scoped>
  #cart {
    height: 100vh;
  }
  .nav-bar {
    background-color: var(--color-tint);
    /* font-weight: 700; */
    color: #fff;
  }
  /* .cart-list {
    position: absolute;
    top: 44px;
    bottom: 49px;
    width: 100%;
  } */
</style>